import { defineComponent, computed } from 'vue'
import { clsName } from './util'
import { COMPS_NAME } from './util/constant'
import { getValByUnit } from 'amtf/utils'

export default defineComponent({
  name: COMPS_NAME.VE_LOADING_GRID,
  props: {
    color: {
      type: String,
      required: true,
    },
    width: {
      type: [Number, String],
      required: true,
    },
    height: {
      type: [Number, String],
      required: true,
    },
  },
  setup(props) {
    // spin style
    const spinStyle = computed(() => {
      return {
        width: getValByUnit(props.width),
        height: getValByUnit(props.height),
      }
    })

    // item style
    const itemStyle = computed(() => {
      return {
        'background-color': props.color,
      }
    })

    return () => (
      <div style={spinStyle.value} class={clsName('grid')}>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
        <div style={itemStyle.value} class={clsName('grid-cube')}></div>
      </div>
    )
  },
})
